//路由表配置：src/routes/index.js
import { Navigate } from "react-router-dom"
import { lazy, Suspense } from "react";

import Home from "../pages/Home"
import Welcome from "../pages/Welcome"
import Login from "../pages/Login";

import { myStorage } from "../utils";
import { message } from "antd";

const router = [
    {
        path:'/',
        element: <Navigate to="/home"/>
    },
    {
        path:'/login',
        element: <Login/>
    },
    {
        path:'/home',
        element: <GardRoute><Home/></GardRoute>,
        children: [
            {
                path:'',
                element: <Welcome/>
            },
            {
                path:'Welcome',
                element: <Welcome/>
            },
            {
                path:'system',
                children: [
                    {
                        path:'',
                        element: LazyLoad("Menu")
                    },
                    {
                        path:'menu',
                        element: LazyLoad("Menu")
                    },
                    {
                        path:'modify',
                        element: LazyLoad("Modify")
                    }
                ]
            },
            {
                path: 'limits',
                children: [
                    {
                        path:'',
                        element: LazyLoad("Role")
                    },
                    {
                        path:'role',
                        element: LazyLoad("Role")
                    },
                    {
                        path:'user',
                        element: LazyLoad("User")
                    },
                    {
                        path:'dept',
                        element: LazyLoad("Dept")
                    }
                ]
            },
            {
                path: 'common',
                children: [
                    {
                        path:'',
                        element: LazyLoad("Info")
                    },
                    {
                        path:'info',
                        element: LazyLoad("Info")
                    }
                ]
            },
            {
                path: 'my',
                children: [
                    {
                        path:'',
                        element: LazyLoad("Note")
                    },
                    {
                        path:'note',
                        element: LazyLoad("Note")
                    },
                    {
                        path:'task',
                        element: LazyLoad("Task")
                    }
                ]
            },
            {
                path: 'personnel',
                children: [
                    {
                        path:'',
                        element: LazyLoad("StaffInfo")
                    },
                    {
                        path:'staffInfo',
                        element: LazyLoad("StaffInfo")
                    },
                    {
                        path:'attendanceRecord',
                        element: LazyLoad("AttendanceRecord")
                    },
                ]
            },
            {
                path:'visualizing',
                element: LazyLoad("Visualizing")
            }
        ]
    },
    {
        path: '/error',
        element: LazyLoad("NotFound")
    },
    {
        path: '*',
        element: <Navigate to='/error' replace={true}/>
    },
]
// 路由懒加载
function LazyLoad(path){
    const Com = lazy(()=>import("../pages/"+path))
    return (
        <Suspense fallback={<>Loading...</>}>
            <Com/>
        </Suspense>
    )
}
//路由守卫封装函数
function GardRoute({ children }) {
    //获取token
    const isToken = myStorage.get("token");
    if (isToken) {
        //如果有token，那就去往该组件包裹的页面
        return <>{children}</>
    } else {
        // 提示用户
        message.error("无法访问，请先登录！");
        //跳转去登录页面
        return <Navigate to='/login' replace />
    }
}

export default router